<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .a{
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            margin: 50px;
            border: 0.5px solid #333;
        }

        .b{
            width: 400px;
            height: 400px;
            background-color: aquamarine;
            margin: 50px;
            border: 1px solid #333;
            transform: scale(0.5);
            transform-origin: left top;
        }

        .c{
            width: 200px;
            height: 200px;
            margin: 50px;

            /* 
            线性渐变
            linear-gradient(angle,colorStop)
                angle:渐变线的方向的角度 
                   to right 
                   也可以设置 xxxdeg

                colorStop(color position)  渐变开始的位置
                    color 渐变的颜色
                    position 开始位置
            */
            /* background-image: linear-gradient(to right,red 0,blue); */


            /* 等价 */
            /* background-image: linear-gradient(to right,red 20%,blue 80%);
            background-image: linear-gradient(to right,red 0%, red 20%,blue 80%,blue 100%); */


            /* background-image: linear-gradient(to right,red,blue,orange); */
            /* background-image: linear-gradient(0deg,red,blue,orange); */


            background-image: linear-gradient(to right,red 0.5px,transparent 0.5px ),linear-gradient(to left,red 0.5px,transparent 0.5px ); 

            background-image: linear-gradient(to top, #ff9a9e 0%, #fecfef 99%, #fecfef 100%);
        }


    </style>
</head>
<body>
    <div class="box a"></div>
    <div class="box b"></div>
    <div class="box c"></div>
</body>
</html>